import Base from "../base.js";
import SchedulesService from "../../service/SchedulesService.js"
export default class extends Base {

  constructor(props) {
    super(props);

  }

  render() {
    const template = `
          <table id="table" lay-filter="table"></table>
    `;
    this.$el.html(template);
  }
  async getSchedules() {
    return await SchedulesService.getSchedules()
  }
  handle() {
    this.table.on('tool(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if (layEvent === 'detail') { //查看
        //do somehing
      } else if (layEvent === 'del') { //删除
        layer.confirm('确定删除该排片？', function (index) {
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          SchedulesService.delete(data)
        });
      } else if (layEvent === 'edit') { //编辑
        SchedulesService.setSchedulesData("_updataSchedule", data)
        location.hash = "#/info/updataSchedule"


        //同步更新缓存对应的值
        obj.update({
          username: '123',
          title: 'xxx'
        });
      }
    });
  }
  async layui() {
    let data = await this.getSchedules()
    data = data.filter(v=>(v.movieId&&v.cinemasId&&v.theaterId));
    this.table.render({
      elem: '#table',
      page: true, //开启分页
      data: data,
      cols: [
        [ //表头
          {
            field: '_id',
            title: 'ID',
            sort: true,
            fixed: 'left'
          }, {
            field: 'movieId',
            title: '电影',
            templet: (data) => {
              return data.movieId.cname
            }

          }, {
            field: 'cinemasId',
            title: '影院',
            templet: (data) => {
              return data.cinemasId.name
            }
          }, {
            field: 'theaterId',
            title: '放映厅',
            sort: true,
            templet: (data) => {
              return data.theaterId.name
            }
          },
          {
            field: 'showTime',
            title: '放映时间',
            sort: true
          },
          {
            field: 'price',
            title: '价格',
            sort: true
          },
          {
            field: 'play',
            title: '操作',
            toolbar: `
        <div>
        <a class="layui-btn layui-btn-xs" lay-event="edit">更新</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
        `
          }
        ]
      ]
    });
  }
  mounted() {

  }
}